<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
       <img v-bind:src="img" alt="">
        <input type="button" value="修改图片" @click="handler">
    </div>
</body>
<script src="./vue.js"></script>
<script>
    //全局指令
    //功能： 让使用该指令的 dom元素获得焦点
    Vue.directive('bind',{

        //当指令和 dom元素绑定时， 调用， 此时 dom元素并你没有被渲染
        //参数： 
        //el： 指令所在 dom元素
        //binding：指令李相关信息
        // name：指令名
            //     rawName: 指令及其指令后面紧跟的内容（用的非常少）
            //     arg：指令冒号后面跟的参数
            //     expression:表达式，跟在等号后面的js表达式
            //     value：是表达式运算结果
            //     modifiers：修饰符


        bind(el,binding){
            console.log('bind')
            console.log('binding 参数',binding)
        },
        //当指令 所在的 dom元素插入到父节点时， 调用，
        //简单理解： dom元素 初次渲染完毕
        inserted(el,binding){
            console.log('instered')
        },
        //当指令 使用的数据发生变化时， 会影响重新渲染 ，此时调用 update
        update(el,binding){
            console.log('update')
        },
  
    })



    let vm = new Vue({
        el: "#app",
        data:{
           img:"./imgs/1"
        },
        methods:{
            handler(){
                this.img = "./imgs/2"
            }
        }
    })
</script>
</html> 